<template>
  <h1>el_下拉框选择器组件</h1>
  <el-select v-model="city" placeholder="请选择喜欢的城市" style="width: 50%">
<!--    :key="item.value"-->
    <el-option
      v-for="item in cities"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
  <h1>你选择的是{{city}}</h1>
</template>

<script setup>
import {ref} from "vue";

const cities = [
  {
    value: 'beijing',
    label: '北京'
  },
  {
    value: 'shanghai',
    label: '上海'
  },
  {
    value: 'shenzhen',
    label: '深圳'
  },
  {
    value: 'guangzhou',
    label: '广州'
  },
  {
    value: 'nanjing',
    label: '南京'
  },
  {
    value: 'wuhan',
    label: '武汉'
  }
]
const city = ref('');
</script>

<style scoped>

</style>